/* colors */
@white: #fff;
@black: #000000;
@red: #ff4d4f;
@grey: #00000040;
@grey2: #f8f8f8;
@orange: #f1a462;
@blue: #1890ff;
@green: #9ad45aff;
@yellow: #f5c242ff;
@purple: #822d82;
@shadow: #00000033;

@tableActionIconActiveColor: @blue;
@tableActionIconNegativeColor: @grey;

/* default color */
@interactiveIcon: @grey;

/* variable */
@lineHeightDefault: 1;
@fontSizeDefault: 1rem;
@fontSizeTab: 1.111rem;
@fontSizeTabActive: 1.25rem;
@fontSizeBigger: 1.333rem;
@fontWeightBoldDefault: 400;
@fontWeightBold: 700;
@borderWidth: 0.111rem;

@tableLogoWidth: 1.5rem;
@tableLogoHeight: 1.5rem;

/* default variable */

/* fucs */
.commonWrapper() {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: @white;
  overflow: auto;
}

.commonDetailWrapper() {
  .commonWrapper();

  padding: 20px;
}

.commonActionIcon(@iconColor) {
  display: flex;
  width: 1rem;
  height: 100%;

  > :global(span) {
    display: flex;
  }

  :global(svg) {
    margin: auto;
    fill: @iconColor;
  }
}

.commonPicInfoPage() {
  .commonWrapper();

  overflow-y: auto;
  background-color: transparent;

  .content {
    display: flex;
    width: 100%;
    overflow: hidden;

    .img {
      width: 25%;
      margin: auto;
      fill: @interactiveIcon;
    }
  }
}

.commonTablePage {
  .commonWrapper();

  :global(.ant-pro-table-search) {
    background: transparent;
    margin-bottom: 0;

    :global(.ant-row.ant-row-start) {
      :global(.ant-form-item) {
        margin-bottom: 1rem;
      }
    }
  }

  :global(.ant-table-wrapper) {
    background: transparent;

    :global(.ant-table-cell) {
      :global(.ant-space) {
        vertical-align: middle;
      }
    }
  }

  :global(.ant-pro-table-list-toolbar) {
    overflow: auto;

    :global(.ant-pro-table-list-toolbar-left) {
      max-width: 50%;
      overflow: auto;
    }
  }

  :global(.react-contexify) {
    padding: 0;

    :global(.react-contexify__item:hover) {
      &:global(:first-child .react-contexify__item__content) {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background-color: transparent;
      }

      &:global(:last-child .react-contexify__item__content) {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        background-color: transparent;
      }
    }

    :global(.react-contexify__item) {
      :global(.react-contexify__item__content) {
        flex: 1;
        padding: 0;

        :global(button) {
          display: flex;
          justify-content: flex-start;
          flex: 1;
          margin: 3px;

          &:global(.ant-btn .anticon) {
            margin: auto 0;
          }
        }
      }
    }

    :global(.react-contexify__separator) {
      margin: 0;
    }
  }
}

.withListUpdatedAt() {
  .listUpdatedAt {
    word-break: keep-all;
    white-space: nowrap;
  }
}

.commonTableActionButton() {
  .button {
    display: flex;

    &:global(.ant-btn-link) {
      padding: 0;
    }

    :global(span) {
      margin: auto;

      :global(svg) {
        display: flex;
        width: 1rem;
        height: 100%;
        fill: @blue;
      }
    }

    &:global(.ant-btn-primary span svg) {
      fill: @white;
    }

    &:global(.ant-btn-link span svg) {
      fill: @blue;
    }

    &:global(.ant-btn > .anticon + span) {
      margin-left: 0;
    }

    &[disabled] {
      :global(svg) {
        fill: @grey;
      }
    }

    &:not([disabled]) {
      &.danger {
        color: @red;

        :global(svg) {
          fill: @red;
        }
      }
    }
  }
}

.linkActionWrapper {
  display: flex;
  margin-right: 0.2rem;

  .linkActionIcon {
    margin: auto 0;
  }

  .linkAction {
    margin: auto 0;
    font-size: 14px;
    word-break: keep-all;
  }
}

.withTreeTableForm() {
  .formWrapper {
    display: flex;
    width: 100%;
    background-color: @white;
    padding: 1rem;

    .formItem {
      display: flex;
      margin: auto 2rem auto 0;

      .searchType {
        background: transparent;
      }

      :global(.ant-form-item) {
        margin: 0;
      }
    }
  }
}

.withTreeTable() {
  .withTreeTableForm();

  .wrapper {
    .hrefLink {
      > :global(.ant-typography) {
        color: @blue;
      }
    }
  }
}

.smallProTable() {
  :global(.ant-table.ant-table-small .ant-table-thead > tr > th) {
    padding: 2px;
  }

  :global(.ant-table.ant-table-small .ant-table-tbody > tr > td) {
    padding: 4px;
  }

  :global(.ant-pro-table-list-toolbar-container) {
    padding-block: 2px 4px;
  }
}

.sideTreeWrapper() {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 3px;
  background-color: white;
  box-shadow: #ccc 1px 1px;
  z-index: 1;
  max-width: 400px !important;
  flex-basis: auto !important;
  width: auto !important;
}
